<!--
  店铺信息统计缩略图组件
  @author Wu.Liang
  @date 2025-01-30
-->
<template>
  <el-card class="shop-stats-panel" shadow="hover">
    <template #header>
      <div class="card-header">
        <div class="header-left">
          <el-icon class="header-icon"><Shop /></el-icon>
          <span class="header-title">店铺信息统计</span>
        </div>
        <div class="header-right">
          <el-button text size="small" @click="handleRefresh">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
          <el-button text size="small" @click="handleViewMore">
            查看更多
          </el-button>
        </div>
      </div>
    </template>
    
    <div class="stats-content">
      <!-- 主要统计指标 -->
      <div class="main-stats">
        <div class="stat-item primary">
          <div class="stat-icon">
            <el-icon><TrendCharts /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">今日营业额</div>
            <div class="stat-value">¥{{ formatNumber(todayRevenue) }}</div>
            <div class="stat-trend" :class="revenueTrend.type">
              <el-icon :size="12">
                <ArrowUp v-if="revenueTrend.type === 'up'" />
                <ArrowDown v-if="revenueTrend.type === 'down'" />
                <Minus v-if="revenueTrend.type === 'stable'" />
              </el-icon>
              {{ revenueTrend.value }}
            </div>
          </div>
        </div>
        
        <div class="stat-item secondary">
          <div class="stat-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">今日客流量</div>
            <div class="stat-value">{{ todayCustomers }}</div>
            <div class="stat-trend" :class="customerTrend.type">
              <el-icon :size="12">
                <ArrowUp v-if="customerTrend.type === 'up'" />
                <ArrowDown v-if="customerTrend.type === 'down'" />
                <Minus v-if="customerTrend.type === 'stable'" />
              </el-icon>
              {{ customerTrend.value }}
            </div>
          </div>
        </div>
      </div>
      
      <!-- 次要统计指标 -->
      <div class="secondary-stats">
        <div class="mini-stat">
          <div class="mini-stat-icon">
            <el-icon><ShoppingCart /></el-icon>
          </div>
          <div class="mini-stat-content">
            <div class="mini-stat-label">订单数</div>
            <div class="mini-stat-value">{{ todayOrders }}</div>
          </div>
        </div>
        
        <div class="mini-stat">
          <div class="mini-stat-icon">
            <el-icon><Star /></el-icon>
          </div>
          <div class="mini-stat-content">
            <div class="mini-stat-label">好评率</div>
            <div class="mini-stat-value">{{ goodRate }}%</div>
          </div>
        </div>
        
        <div class="mini-stat">
          <div class="mini-stat-icon">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="mini-stat-content">
            <div class="mini-stat-label">平均服务时长</div>
            <div class="mini-stat-value">{{ avgServiceTime }}分钟</div>
          </div>
        </div>
      </div>
      
      <!-- 实时状态指示器 -->
      <div class="status-indicators">
        <div class="status-item">
          <div class="status-dot" :class="onlineStatus ? 'online' : 'offline'"></div>
          <span class="status-text">{{ onlineStatus ? '在线营业' : '离线状态' }}</span>
        </div>
        <div class="status-item">
          <div class="status-dot" :class="stockStatus ? 'normal' : 'warning'"></div>
          <span class="status-text">{{ stockStatus ? '库存正常' : '库存不足' }}</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import {
  Shop,
  Refresh,
  TrendCharts,
  User,
  ArrowUp,
  ArrowDown,
  Minus,
  ShoppingCart,
  Star,
  Clock
} from '@element-plus/icons-vue'

// 组件属性
interface Props {
  // 店铺ID（可选，用于获取特定店铺数据）
  shopId?: number
  // 是否显示刷新按钮
  showRefresh?: boolean
  // 是否显示查看更多按钮
  showViewMore?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  shopId: undefined,
  showRefresh: true,
  showViewMore: true
})

// 组件事件
const emit = defineEmits<{
  refresh: []
  viewMore: []
}>()

// 统计数据
const todayRevenue = ref<number>(0)
const todayCustomers = ref<number>(0)
const todayOrders = ref<number>(0)
const goodRate = ref<number>(0)
const avgServiceTime = ref<number>(0)
const onlineStatus = ref<boolean>(true)
const stockStatus = ref<boolean>(true)

// 趋势数据
const revenueTrend = ref({
  type: 'up' as 'up' | 'down' | 'stable',
  value: '+12.5%'
})

const customerTrend = ref({
  type: 'up' as 'up' | 'down' | 'stable',
  value: '+8.3%'
})

// 格式化数字
const formatNumber = (num: number): string => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toLocaleString()
}

// 刷新数据
const handleRefresh = () => {
  emit('refresh')
  loadShopStats()
}

// 查看更多
const handleViewMore = () => {
  emit('viewMore')
}

// 加载店铺统计数据
const loadShopStats = async () => {
  try {
    // 模拟数据加载
    // 在实际项目中，这里应该调用API获取真实的店铺数据
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 模拟数据
    todayRevenue.value = Math.floor(Math.random() * 50000) + 10000
    todayCustomers.value = Math.floor(Math.random() * 200) + 50
    todayOrders.value = Math.floor(Math.random() * 100) + 20
    goodRate.value = Math.floor(Math.random() * 20) + 80
    avgServiceTime.value = Math.floor(Math.random() * 30) + 15
    
    // 随机设置状态
    onlineStatus.value = Math.random() > 0.1
    stockStatus.value = Math.random() > 0.2
    
    // 随机设置趋势
    const trends = ['up', 'down', 'stable']
    revenueTrend.value.type = trends[Math.floor(Math.random() * trends.length)] as any
    revenueTrend.value.value = revenueTrend.value.type === 'up' ? '+12.5%' : 
                             revenueTrend.value.type === 'down' ? '-5.2%' : '0%'
    
    customerTrend.value.type = trends[Math.floor(Math.random() * trends.length)] as any
    customerTrend.value.value = customerTrend.value.type === 'up' ? '+8.3%' : 
                               customerTrend.value.type === 'down' ? '-2.1%' : '0%'
  } catch (error) {
    console.error('加载店铺统计数据失败:', error)
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadShopStats()
})
</script>

<style scoped>
.shop-stats-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  color: #409eff;
  font-size: 18px;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.header-right {
  display: flex;
  gap: 8px;
}

.stats-content {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.stat-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 120px;
}

.stat-item.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.stat-item.secondary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
  font-weight: 500;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.stat-trend.up {
  color: #67c23a;
}

.stat-trend.down {
  color: #f56c6c;
}

.stat-trend.stable {
  color: #909399;
}

.secondary-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.mini-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  border-left: 4px solid #409eff;
  min-height: 80px;
}

.mini-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.mini-stat-content {
  flex: 1;
}

.mini-stat-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
  font-weight: 500;
}

.mini-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #303133;
}

.status-indicators {
  display: flex;
  gap: 24px;
  padding: 20px;
  background: #fafbfc;
  border-radius: 10px;
  border: 1px solid #ebeef5;
  margin-top: auto;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.online {
  background: #67c23a;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.3);
}

.status-dot.offline {
  background: #f56c6c;
  box-shadow: 0 0 8px rgba(245, 108, 108, 0.3);
}

.status-dot.normal {
  background: #67c23a;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.3);
}

.status-dot.warning {
  background: #e6a23c;
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.3);
}

.status-text {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-stats {
    flex-direction: column;
    gap: 16px;
  }
  
  .secondary-stats {
    flex-direction: column;
    gap: 12px;
  }
  
  .status-indicators {
    flex-direction: column;
    gap: 12px;
  }
  
  .stat-item {
    min-height: 100px;
    padding: 20px;
  }
  
  .mini-stat {
    min-height: 70px;
    padding: 16px;
  }
}
</style>
